<template>
	<view>
		<view class="order-list-box">
			<view class="order-list-warp">
				<view class="order-list-item" v-for="(item,index) in orderInfo.goodslist" :key='index'>
					<view class="order-list-item-middle">
						<view class="order-list-item-middle-left">
							<image :src="item.original_img" mode="aspectFit"></image>
						</view>
						<view class="order-list-item-middle-right">
							<view class="order-list-item-middle-right-top">
								<view class="order-list-item-middle-right-top-name">
									<text>{{item.goods_name}}</text>
								</view>
								<view class="order-list-item-middle-right-top-spac">
									<text>{{item.spec_key_name}}</text>
								</view>
							</view>
							<view class="order-list-item-middle-right-bottom">
								<view class="order-list-item-middle-right-bottom-price">
									￥<text>{{item.goods_price}}</text>
								</view>
								<view class="order-list-item-middle-right-bottom-number">
									<text>x{{item.goods_num}}</text>
								</view>
							</view>
						</view>
					</view>

					<view class="order-list-item-bottom">
						<view class="order-list-item-bottom-warp">
							<text class="text1" @click="navToSubmit(item)">{{item.is_comment ? '已评价' : '去评价'}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		OrderApi
	} from '@/api'
	export default {
		data() {
			return {
				orderId: 0,
				orderInfo: {}
			}
		},
		onLoad({
			orderId
		}) {
			this.orderId = Number(orderId)
		},
		onShow() {
			this.getOrderInfo()
		},
		methods: {
			getOrderInfo() {
				OrderApi.UserOrderInfo({
						order_id: this.orderId
					})
					.then(res => {
						this.orderInfo = res
					})
					.catch(err => {
						console.log('getOrderInfo', err);
					})
			},
			// 跳转提交评价
			navToSubmit(data) {
				if (data.is_comment)
					return
				const {
					goods_id,
				} = data
				this.$navTo('pages/mines/evaluation/submit', {
					orderId: this.orderId,
					goodsId: goods_id,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-list-box {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 0rpx 30rpx 0rpx;

		.order-list-warp {
			background-color: #f5f5f5;

			.order-list-item {
				box-shadow: 5rpx 8rpx 10rpx rgba($color: #6d6d6d, $alpha: 0.2);
				margin-bottom: 20rpx;
				padding-top: 30rpx;
				border-radius: 10rpx;

				// 订单产品部分
				.order-list-item-middle {
					display: flex;
					justify-content: space-between;
					padding: 0rpx 20rpx 0;

					.order-list-item-middle-left {
						width: 210rpx;
						height: 170rpx;

						image {
							border-radius: 5rpx;
							width: 100%;
							height: 100%;
						}
					}

					.order-list-item-middle-right {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding-left: 20rpx;

						.order-list-item-middle-right-top {
							.order-list-item-middle-right-top-name {
								font-size: 26rpx;
								font-weight: 400;
								color: #2e2e2e;
							}

							.order-list-item-middle-right-top-spac {
								padding-top: 10rpx;
								font-size: 20rpx;
								font-weight: 400;
								color: #666;
							}
						}

						.order-list-item-middle-right-bottom {
							display: flex;
							justify-content: space-between;

							.order-list-item-middle-right-bottom-price {
								font-size: 24rpx;
								font-weight: 700;
								color: #111;

								text {
									font-size: 32rpx;
								}
							}

							.order-list-item-middle-right-bottom-number {
								font-size: 24rpx;
								font-weight: 400;
								color: #7e7e7e;
							}
						}
					}
				}

				.order-list-item-bottom {
					.order-list-item-bottom-warp {
						display: flex;
						justify-content: flex-end;
						padding: 20rpx 20rpx 20rpx 0;

						.text1 {
							padding: 10rpx 44rpx;
							background-color: #FF9844;
							font-size: 24rpx;
							font-weight: 400;
							color: #fff;
							border-radius: 30rpx;
						}
					}
				}
			}
		}
	}
</style>